<template>
	<view class="app">
		<view><u-toast ref="uToast" /></view>
		<view class="tips">
			<view style="color: white; font-size: 32rpx;">应用内部某功能禁用管控策略设置</view>
			<view style="color: #cccccc; font-size: 25rpx; ">针对部分内嵌子APP应用的应用，可通过改功能将子应用包名添加到应用辅助白名单，以便于母APP正常运行。注意:APP应用包名，您可通过相关工具或咨询APP应用提供方获取</view>
		</view>
		
		<view  class="body">
			<view style="font-weight: bold; font-size: 30rpx; padding-top: 20rpx; padding-bottom: 20rpx;">{{settingText}}</view>
			<view class="noData"  v-if="showNothing">
				<view>
					<u-image width="120rpx" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/noData.png" mode="widthFix"></u-image>
					<view>暂无数据</view>
				</view>
			</view>
			
			<view v-for="(item, index) in appList" :key="index" >
				<view class="appInfo">
					<u-image width="150rpx" height="150rpx"  mode="widthFix" :src="item.app_img"></u-image>
					<!-- <view style="font-size: 40rpx;">{{item.app_name}}</view> -->
					<view style="margin-bottom: 20rpx;">
						<view>应用名称: <text style="color: #cccccc;">{{item.app_name}}</text></view>
						<!-- <view>包名:<text style="color: #cccccc;">{{item.package_name}}</text></view> -->
						<view>更新日期: <text style="color: #cccccc;">{{item.update_time}}</text></view>
					</view>
					<u-button shape="square" size="medium" :custom-style="customStyle" @click="delWhiteAppControl(item.id)">删除</u-button>
				</view>
			</view>
		</view>
		
		<view style="display: flex; justify-content: center; margin: 10rpx; margin-top: 30rpx;">
			<u-button shape="square" type="primary" @click="goToUrl">添加应用辅助白名单</u-button>
		</view>
		
	</view>
		
</template>

<script>
import {delWhiteApp, getWhiteApp } from '../../../api/userHome'
	export default {
		data() {
			return {
				settingText: '当前已设置应用辅助白名单',
				src: '',
				appList: [],
				pages: 1,
				//是否无更多
				notMore: true,
				showNothing: false,
				totalPages: 0,
				pageSize: 5,
				customStyle: {
					margin: '0rpx',
					padding: '0rpx',
					width: '100rpx',
					height: '60rpx',
				},
			}
		},
		onLoad() {
			// this.refreshListAndPage();
		},
		
		onShow() {
			this.refreshListAndPage();
		},
		
		//页面滚动到底部事件
		onReachBottom() {
			 //获取列表
			 if (this.notMore) {
				 this.pages++
				 this.queryWhiteApp()
			 }
		},
		methods: {
			queryWhiteApp() {
				uni.showLoading({
					title: "加载中"
				});
				getWhiteApp({
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId"),
					pageSize: this.pageSize
				}).then(res => {
					if (res.data) {
						this.appList = this.appList.concat(res.data)
						this.showNothing = false
						this.totalPages =  Math.ceil(res.total / this.pageSize)  //获取总页数
						if (this.pages >= this.totalPages) {
							this.notMore = false
						}
					}else {
						this.notMore = false
						if (this.pages == 1) {
							this.showNothing = true
						}else {
							uni.showToast({
								title: '没有更多了'
							})
						}
					}

				}).catch(err => {
					uni.hideLoading()
					this.showNothing = true
					this.appList = []
				})
				uni.hideLoading()
			},
			//刷新列表和页码
			refreshListAndPage() {
				this.appList = []
				this.pages = 1
				this.notMore = true
				this.hasData = false
				this.queryWhiteApp()
			},
			goToUrl() {
				uni.navigateTo({
					url: '/pages_subpackage/appControl/addWhiteApp/index'
				})
			},
			delWhiteAppControl(id) {
				delWhiteApp({
					white_app_id: id,
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId"),
					last_ip: uni.getStorageSync("Ip")
				}).then(res => {
					this.appList = this.appList.filter(item => item.id !== id)
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			}
		}
	}
	
</script>

<style lang="scss">
	.app {
		.tips {
			    background-color: #4d94ff;
			    border-radius: 35rpx;
			    height: 180rpx;
			    padding-left: 60rpx;
			    padding-top: 13rpx;
				margin-bottom: 20rpx;
		}
		
		.body {
			background-color: #ffffff;
			border-style: solid;
			border-color: #ffffff;
			border-radius: 20rpx;
		}
		.noData {
			display: flex;
			justify-content: center;
		}
		.appInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
		}
	}
</style>